<template>
  <el-card shadow="hover" style="height: 100%;" :body-style="{height:'100%'}">
    <template #header>
      <nav class="flex justify-between">
        <span>窗口大小改变</span>
        <el-link type="primary" target="_blank" href="https://vueuse.org/core/useWindowSize/">useWindowSize</el-link>
      </nav>
    </template>
    <h1>宽{{width}}</h1>
    <h1>高{{height}}</h1>
  </el-card>
</template>

<script setup lang="ts" name="useWindowSize">
import { useWindowSize } from '@vueuse/core'
const {width, height} = useWindowSize()

</script>

<style scoped lang="less">

</style>
